<template>
	<view>
		<view class="thumbnail">
			<view>
				<img 
				 v-if="!havePoint" 
				 :src="$imgUrl(unActiveImg)" 
				 :style="{width: `${width}rpx`,height:height + 'rpx'}" 
				 alt="" 
				 @click="draw">
				<img 
				 v-if="havePoint"
				 :src="$imgUrl(activeImag)" 
				 :style="{width: width + 'rpx',height:height + 'rpx'}" 
				 alt="" 
				 @click="draw">
			</view>
			<view 
			class="thumbnail-point"
			v-for="(item,index) in thumbnailArr"
			:key="index"
			:style="{left:item.xCoor,top:item.yCoor}"
			>
				{{item.indexPoint}}
			</view>
		</view>		
		<u-popup v-model="drawPoint" v-if="drawPoint" mode="bottom" height="100%" closeable="true">
			<view class="draw-box">
				<view  style="width: 100%;height: 800rpx;background-color: #fff; position: relative;" @click="markPoint($event)">
					<img id="box" :src="$imgUrl(unActiveImg)" style="width: 100%;height: 800rpx;" alt="">
					<view class="point"
					 v-for="(item,index) in pointArr" 
					:key="index" 
					:style="{left:item.Xpunctuation,top:item.Ypunctuation}"
					@click.stop="clean(index,item)"
					>				
					{{item.indexPoint}}
					</view>
				</view>
				<view class="confirm-btn">
					<u-button type="primary" @click="submit">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

	export default {
		/*
		图片标点选择组件
		@property {Number} width 图片展示宽度 单位为rpx
		@property {Number} heith 图片展示宽度 单位为rpx
		@property {Number} indexPic 对应缩略图index	
		@property {string} unActiveImg 未标点展示图片 
		@property {string} activeImag 已标点展示图片		
		@event {Array} ponitArr 标点坐标list
		@property {Number} beginIndex 起始index
		*/
		props:{
			width:{type:Number,default:350},
			height:{type:Number,default:300},
			indexPic:{type:Number/null,default:null},
			unActiveImg:{type:String,default:''},
			activeImag:{type:String,default:''},
			ponitArr:{type:Array,default:()=>{}},
			beginIndex:{type:Number/null}
		},
		async created(){
			this.phoneInfo = await this.$utils.getPhoneInfo()
			this.Topx = this.phoneInfo.windowWidth / 750 //不同手机宽度显示比例  用于rpx => px  
			
		},
		computed:{
			avtiveList(){
				let arr = this.ponitArr
				this.thumbnailArr = this.ponitArr
				this.ponitArr.length > 0 ? this.havePoint = true  : this.havePoint = false
				
				console.log('ponitArr========>',this.ponitArr)
			}
		},
		// mounted(){
		// 	console.log('ponitArr',this.ponitArr)
		// },
		data(){
			return {
				havePoint:false,
				drawPoint:false,
				pointArr:[],
				thumbnailArr:[],
				Topx:null,
				phoneInfo:null,
				currentIndex:0
			}
		},	 
		watch:{
			beginIndex(v){
				this.currentIndex = v + 1
			}
		},
		methods:{
			draw(){
				if(this.$store.getters.isEdit) return
				this.drawPoint = true 
			},
			markPoint(e){
				let index = 0 
				if(this.pointArr.length === 1 ){
					uni.showToast({
						title:'只允许标记一个点位!',
						icon:'none'
					})
					return 
				}
				let beginIndex = this.beginIndex
				if(this.havePoint){
					index = this.currentIndex 
					this.currentIndex += 1 
				} else {
					index = this.beginIndex + this.pointArr.length + 1
				}
				let Topx = this.Topx
				let x = ((e.detail.x || e.target.x) ).toFixed(0)
				let y = ((e.changedTouches[0].clientY ) - e.currentTarget.offsetTop).toFixed(0) //去掉padding
				let ponit = {
					indexPoint:index,
					x:x, //x y 为以px单位的 0点在图片左下角的坐标系 
					y:y,
					Xpunctuation: (x / Topx).toFixed(0) + 'rpx',
					Ypunctuation: (y / Topx).toFixed(0) + 'rpx',
					xCoor: null,
					yCoor: null,
					indexPic:this.indexPic //对应哪张图的index
				}
				this.pointArr.push(ponit)
			},
			clean(i,oldItem){
				this.pointArr.splice(i,1)
				this.pointArr.map(item=>{
					if(item.index > oldItem.index){
						item.index -= 1 
					}
					return item
				})
				this.$emit('deletePoint',oldItem)
			},
		    async submit(){
				// uni.chooseImage({
				//   success (res) {
				//     const tempFilePaths = res.tempFilePaths
				//     uni.uploadFile({
				//       url: 'https://dmocassistant.szlanyou.com/mp/file/notice/upload.do', 
				//       filePath: tempFilePaths[0],
				//       name: 'uploadfile',
				// 	  header:{
				// 	  	'Authorization':storage.get('token')
				// 	  },
				//       success (res){
				//         const data = res.data
				//         console.log(res)
				//       }
				//     })
				//   }
				// })
				// return 
				let phoneInfo = this.phoneInfo
				let Topx = this.Topx
				let widTrans = Number(((this.width * Topx) / phoneInfo.windowWidth).toFixed(2))  // X坐标转换比例
				let heiTrans = Number((this.height / 800 ).toFixed(2))  // Y坐标转换比例
				this.pointArr.map(item=>{
					item.xCoor = (item.x * widTrans).toFixed(0) + 'px'
					item.yCoor = (item.y * heiTrans).toFixed(0) + 'px'
					return item
				})
				this.thumbnailArr = this.pointArr
				this.havePoint = true
				this.drawPoint = false 
				this.$emit('getPointArr', this.thumbnailArr)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
